<script setup lang="ts">
import { onMounted, ref, watch } from 'vue'
import Slider from '@/layout/MainLayout/Slider.vue'
import { ebookList } from '@/api/interface/web/home'

const ebooks: any = ref([])
const page: any = ref(1)
const pageSize: any = ref(10)
const total: any = ref(10)

const getEbookList = () => {
  ebookList({ page: page.value, size: pageSize.value }).then((res: any) => {
    ebooks.value = res.list
    total.value = res.total
  })
}

onMounted(() => {
  getEbookList()
})

watch(page, () => {
  getEbookList()
})
</script>

<template>
  <div class="home-wrapper">
    <Slider />
    <div class="book-wrapper">
      <div class="book-item-wrapper">
        <div class="book-item" v-for="(item, index) in ebooks" :key="index">
          <div class="avatar-title-content">
            <div class="avatar">
              <img :src="item.cover" alt="" />
            </div>
            <div class="title-content">
              <div class="title">{{ item.name }}</div>
              <div class="content">{{ item.description }}</div>
            </div>
          </div>

          <div class="footer">sadfasfd</div>
        </div>
      </div>

      <div class="pagination-container">
        <el-pagination
          v-model:current-page="page"
          v-model:page-size="pageSize"
          background
          layout="total, sizes, prev, pager, next"
          :total="total"
        />
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.home-wrapper {
  height: 100%;
  display: flex;
  .book-wrapper {
    flex: 1;
    margin-left: 20px;
    padding: 10px 0;
    .book-item-wrapper {
      display: flex;

      .book-item {
        width: 33.3%;

        .avatar-title-content {
          display: flex;

          .avatar {
            width: 75px;
            height: 75px;
            margin-right: 10px;
            background-color: gray;

            img {
              width: 75px;
              height: 75px;
            }
          }

          .title-content {
            .title {
              color: #333;
              margin-bottom: 15px;
            }

            .content {
              color: #666;
            }
          }
        }

        .footer {
          margin-top: 20px;
        }
      }
    }

    .pagination-container {
      margin-top: 20px;
    }
  }
}
</style>
